<template>
  <!-- 访客记录-----访客记录 -->
  <div class="visitor-index">
    <!-- <a-row class="aRow-wrapper" :gutter="12"></a-row> -->
    <!-- <a-col class="listContent-wrapper flex column" :span="20"></a-col> -->
    <top-title :updateTime="true" :content="content" style="padding-left: 0"></top-title>

    <div class="l-w_content f1 flex column">
      <div class="threefact-titles">
        <span @click="itemClick(1)" :class="active == 1 ? 'item active' : 'item'">实时</span>
        <span @click="itemClick(2)" :class="active == 2 ? 'item active' : 'item'">小时</span>
        <span @click="itemClick(3)" :class="active == 3 ? 'item active' : 'item'">天</span>
      </div>
      <div class="tabsList f1 flex column">
        <div class="threefact-content-part f1 flex">
          <template v-if="active == 1">
            <real-time v-if="activeKey == 1"></real-time>
          </template>
          <template v-if="active == 2">
            <hour v-if="activeKey == 2"></hour>
          </template>
          <template v-if="active == 3">
            <day v-if="activeKey == 3"></day>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import topTitle from '@/components/topTitle'
import realTime from './realTime'
import hour from './hour'
import day from './day'
export default {
  name: 'visitor-index',
  components: { topTitle, realTime, hour, day },
  data() {
    return {
      content: [['区域排名']],
      activeKey: '1',
      active: 1,
      key: '',
    }
  },
  mounted() {
    // this.activeKey = localStorage.getItem('statisticAnalysisKey') || '1'
    // this.active = localStorage.getItem('statisticAnalysisKey') || '1'
  },
  methods: {
    itemClick(i) {
      this.active = i
      this.activeKey = i
      // localStorage.setItem('statisticAnalysisKey', this.activeKey)
    },
  },
}
</script>
<style lang="less" scoped>
.l-w_content,
.tabsList,
.threefact-content-part {
  min-height: 0;
}

.visitor-index {
  width: 100%;
  height: 100%;
  background: #003e3d;
  padding: 0 0.16rem;
  .threefact-titles {
    margin-top: 5px;
    margin-bottom: 20px;
    .item {
      display: inline-block;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #06d6db;
      background: #024c4e;
      border: 1px solid #036265;
      padding: 10px 50px;
      cursor: pointer;
    }
    .active {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #023234;
      background: #00f8ff;
      border: 1px solid #00f8ff;
    }
  }
}
</style>
